<script setup lang="ts">
  import { ref, reactive, inject } from 'vue';
  import { Button, Input, InputPassword, Form, FormItem, InputSearch } from '@arco-design/web-vue';
  import { sendValidateCode as sendValidateCodeApi } from '/@/api/user';
  import { useAccount } from 'vagmi';
  import { useUserStore } from '/@/store/modules/user';
  import { UserConnectModal } from './context';
  import type { UserConnectModalType } from './context';

  const userConnectModal = inject<UserConnectModalType | null>(UserConnectModal, null);
  const userStore = useUserStore();
  const { address } = useAccount();
  const form = reactive({
    email: '',
    password: '',
  });
  const formForEmailLogin = reactive({
    email: '',
    password: '',
    verifyCode: '',
  });
  const emailSign = ref('');
  const emailSignPending = ref(false);
  const emailSignLabel = ref('发送');

  function countTime() {
    let waitTime = 60;
    run();

    function run() {
      emailSignLabel.value = waitTime-- + '秒后可重发';
      if (waitTime > 0) {
        setTimeout(run, 1000);
      } else {
        emailSignLabel.value = '重发';
        emailSignPending.value = false;
      }
    }
  }

  async function sendValidateCode() {
    if (emailSignPending.value) {
      return;
    }
    emailSignPending.value = true;
    countTime();
    emailSign.value = await sendValidateCodeApi({ email: formForEmailLogin.email });
  }

  function handleSubmitForEmailLogin(data) {
    console.log(data);
  }

  async function login() {
    await userStore.register({
      address: address.value,
      email: form.email,
      password: form.password,
    });
  }
</script>
<template>
  <div class="text-blank text-[32px] text-center font-bold">注册</div>
  <Form :model="formForEmailLogin" @submit="handleSubmitForEmailLogin" layout="vertical">
    <FormItem field="email" label="邮箱地址">
      <Input placeholder="请输入你的邮箱地址" v-model="formForEmailLogin.email" />
    </FormItem>
    <FormItem field="verifyCode" label="验证码">
      <InputSearch
        searchButton
        placeholder="请输入你的验证码"
        v-model="formForEmailLogin.verifyCode"
        :buttonProps="{ disabled: emailSignPending }"
      >
        <template #button-default
          ><div @click="sendValidateCode">{{ emailSignLabel }}</div></template
        >
      </InputSearch>
    </FormItem>
    <FormItem field="password" label="密码">
      <InputPassword placeholder="请输入你的密码" v-model="formForEmailLogin.password" />
    </FormItem>
    <div
      >注册即视为同意
      <a href="/" target="_blank" class="text-[#5F70FF]">PoleStar 用户服务协议</a> 和
      <a href="/" target="_blank" class="text-[#5F70FF]">隐私政策</a>。</div
    >
    <div
      ><Button class="mt-[18px] h-[60px]" type="primary" @click="login" long
        >注册并登录</Button
      ></div
    >
    <div class="mt-[24px] text-center text-[14px]"
      >已有账号<span
        class="text-[#5F70FF] cursor-pointer"
        @click="userConnectModal?.actions.jumpToLogin"
        >去登录</span
      ></div
    >
  </Form>
</template>
